<template>
  <el-dialog
    title="环境变量设置"
    :visible.sync="dialogVisible">
    <div style="height:500px; width:100%;">
      <div style="float:left; height:100%; width: 200px;">
        <div style="height: 47px; line-height:47px; padding-left:10px; border-bottom: 1px solid #eaeaea; margin-right: 10px;">
          <el-button type="text" @click="addEnv">添加环境</el-button>
        </div>
        <div>
          <ul class="env-list">
            <li v-bind:key="env.id" v-for="env in enviroment" @click="show(env)">
              <span v-if="env.isEdit"><el-input v-model="env.name" size="small"></el-input></span>
              <span v-else>
                {{env.name}}
                <i class="el-icon-delete" style="float:right; margin-right:10px; margin-top: 3px;"></i>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div style="float:left; height:100%; width:700px;">
        <el-table :data="current">
          <el-table-column
            prop="key"
            label="键"
            width="180">
          </el-table-column>
          <el-table-column
            prop="value"
            label="值">
          </el-table-column>
          <el-table-column
            label="删除"
            width="90">
            <i class="el-icon-delete"></i>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="css" scoped>
 .env-list {
    list-style:none;
    margin:0px;
    padding-left: 10px;
  }

  .env-list li {
    padding: 15px 0px 15px 0px;
  }

  .env-list li :hover {
    cursor: pointer;
  }
</style>

<script>
import { read } from '@/api/enviroment'
export default {
  name: 'Environment',
  data(){
    return {
      dialogLoading: false,
      dialogVisible: false,
      saveBtnLoading: false,
      current: [],
      enviroment: []
    }
  },
  mounted(){

  },
  methods: {
    open(array) {
      console.log(array)
      this.dialogVisible = true
      this.enviroment = array
    },
    addEnv() {
      this.enviroment.push({
        id: '3',
        name: 'kkk',
        isEdit: true
      })
    },
    show(env){
      var json = JSON.parse(env.kv);
      this.current = json;
    },
    close () {
      this.dialogVisible = false
    },
  }
}
</script>
